<template>
  <!-- 题目组件 -->
  <div class="topic-cpn">
    <template v-if="!onlyParser">
      <div class="topic-head">
        <slot name="topic-head"></slot>
      </div>
      <RbQuestion
        :questionData="questionData"
        :option="rbqOption"
        :subPrefixList="subPrefixList"
      >
      </RbQuestion>
      <div class="topic-foot">
        <slot name="topic-foot"></slot>
      </div>
    </template>
    <slot name="answer-box" v-if="showTopicParser">
      <div class="more-box">
        <div class="expand-analysis-item">
          <div class="expand-analysis-item-key">【答案】</div>
          <div class="expand-analysis-item-content">
            <template
              v-if="
                (topicParser.answer && topicParser.answer.length > 0) ||
                (topicData.correct_answer &&
                  topicData.correct_answer.length > 0)
              "
            >
              <!-- 排序题 -->
              <div v-if="topicParser?.structureType === 5">
                <div v-for="(item, index) in topicParser.answer" :key="index">
                  {{ item + 1 }};
                </div>
              </div>
              <!-- 连线题 -->
              <template
                v-else-if="
                  topicParser?.structureType == 6 &&
                  (topicParser.answer || topicData.correct_answer) &&
                  topicParser.options
                "
              >
                <div
                  class="flex"
                  v-for="(row, rowIndex) in topicParser.options[0]"
                  :key="rowIndex"
                >
                  <div v-html="row" class="line"></div>
                  <span>——</span>
                  <div
                    v-html="
                      topicParser.options[1][topicParser.answer[0][rowIndex]]
                    "
                    class="line"
                  ></div>
                </div>
              </template>
            </template>
            <div
              v-if="
                topicParser?.structureType !== 5 &&
                topicParser?.structureType !== 6 &&
                (topicData.subproblem || [])?.length === 0
              "
            >
              <div v-html="getRenderAnswer(topicParser, topicData)"></div>
            </div>
            <!-- 大题 -->
            <template
              v-else-if="
                topicParser.subQuestions && topicParser.subQuestions.length > 0
              "
            >
              <div
                class="sub-question"
                v-for="(item, index) in topicParser.subQuestions"
                :key="index"
              >
                <span>({{ index + 1 }})</span>
                <div v-if="item.subQuestions && item.subQuestions?.length > 0">
                  <div
                    class="flex"
                    v-for="(subItem, subIndex) in item.subQuestions"
                    :key="subIndex"
                  >
                    <span class="sub-index">{{ subIndex + 1 }}</span>
                    <div v-html="subItem.answer || '略'"></div>
                  </div>
                </div>
                <div
                  v-else-if="item.answer != ''"
                  v-html="getRenderAnswer(item, topicData.subproblem[index])"
                ></div>
                <div v-else>略</div>
              </div>
            </template>
            <!-- 大题 解析有问题时用来兜底 -->
            <template
              v-else-if="topicData.subproblem && topicData.subproblem.length"
            >
              <div
                class="sub-question"
                v-for="(item, index) in topicData.subproblem"
                :key="index"
              >
                = <span>({{ index + 1 }})</span>
                <div v-html="item.correct_answer || '略'"></div>
              </div>
            </template>
            <template
              v-else-if="
                (!topicParser.answer || topicParser.answer.length == 0) &&
                (!topicParser.subQuestions ||
                  topicParser.subQuestions.length == 0)
              "
            >
              <div>略</div>
            </template>
          </div>
        </div>
        <div class="expand-analysis-item">
          <div class="expand-analysis-item-key">【分析】</div>
          <div class="expand-analysis-item-content">
            <div v-html="topicParser.idea" v-if="topicParser.idea"></div>
            <template
              v-else-if="
                topicParser.subQuestions && topicParser.subQuestions.length > 0
              "
            >
              <div
                v-for="(item, index) in topicParser.subQuestions"
                :key="index"
                style="display: flex"
              >
                <span>({{ index + 1 }})</span>
                <div v-html="item.idea" v-if="item.idea"></div>
                <div v-else>无</div>
              </div>
            </template>
            <div
              v-else-if="
                (!topicParser.idea &&
                  topicParser.subQuestions &&
                  topicParser.subQuestions.length == 0) ||
                (topicParser.idea == '' &&
                  topicParser.subQuestions &&
                  topicParser.subQuestions.length == 0)
              "
              class="summary"
            >
              无
            </div>
            <template v-else>无</template>
          </div>
        </div>
        <div class="expand-analysis-item">
          <div class="expand-analysis-item-key">【解析】</div>
          <div class="expand-analysis-item-content">
            <div
              v-html="topicParser.solution"
              v-if="topicParser.solution"
            ></div>
            <template
              v-else-if="
                topicParser.subQuestions &&
                topicParser.subQuestions.length > 0 &&
                isHasNotEmptySolution(topicParser.subQuestions)
              "
            >
              <div
                v-for="(item, index) in topicParser.subQuestions"
                :key="index"
                style="display: flex"
              >
                <span>({{ index + 1 }})</span>
                <div v-html="item.solution" v-if="item.solution != ''"></div>
                <div v-else>无</div>
              </div>
            </template>
            <div
              v-else-if="
                (!topicParser.solution &&
                  topicParser.subQuestions &&
                  topicParser.subQuestions.length == 0) ||
                (topicParser.solution == '' &&
                  topicParser.subQuestions &&
                  topicParser.subQuestions.length == 0)
              "
              class="summary"
            >
              无
            </div>
            <template v-else>无</template>
          </div>
        </div>
        <div
          class="expand-analysis-item"
          v-if="questionData.data?.keypoint?.length"
        >
          <div class="expand-analysis-item-key">【知识点】</div>
          <div class="expand-analysis-item-content">
            <div
              class="keypoint-tag"
              v-for="item in questionData.data.keypoint"
              :key="item.id"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </slot>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import RbQuestion from '@ebag/rb-question-vue3'
import QuestionParser from '@ebag/rb-question-parser'

const props = defineProps({
  topicData: { type: Object, required: true },
  onlyParser: {
    // 是否只展示解析
    type: Boolean,
    default: false
  },
  subPrefixList: {
    type: Array,
    default: () => []
  }
  // showTopicParser: { type: Boolean, default: false }
})
const showTopicParser = defineModel('showTopicParser')

const questionData = ref({})
const rbqOption = ref({
  host: {
    resourceHost: 'https://contres.readboy.com/' // 静态资源(图片、音频等)服务器域名
  },
  displayAnswer: false, // 是否显示题目答案，显示答案时不能作答
  interactive: false, // 是否可作答
  readonly: true, // 可作答时是否只读（只显示之前的作答情况但不能改）
  // answerColor?: string; // 答案颜色，值为css颜色声明
  // enableContentFold?: boolean; // 是否启用题干折叠，默认不启用
  // enableSolution?: boolean; // 是否显示答案和解析，默认不显示
  fontSize: '0.08333rem'
})
const topicParser = ref()

// 深度拷贝 + 转换字体 爱学网的坑爹字体会把对号渲染成根号
function changeText(obj) {
  if (obj === null || typeof obj !== 'object') {
    if (typeof obj === 'string') {
      obj = obj.replace(/√/g, '<span style="font-family: KaTex_Main">√</span>')
    }
    return obj
  }
  if (Array.isArray(obj)) {
    return obj.map(item => changeText(item))
  }
  const copiedObj = {}
  for (const key in obj) {
    // eslint-disable-next-line no-prototype-builtins
    if (obj.hasOwnProperty(key)) {
      copiedObj[key] = changeText(obj[key])
    }
  }
  return copiedObj
}

const setquestionData = data => {
  let newTopic = changeText(data)
  let obj = {
    typeDetail: newTopic.type,
    data: newTopic
  }
  return obj
}

const isHasNotEmptySolution = subQuestions => {
  return (subQuestions || []).find(q => !!q.solution)
}

const getRenderAnswer = (item, topicData) => {
  if (topicData?.type === 60)
    return Number(topicData.correct_answer?.[0]) === 0 ? 'T' : 'F'
  if (item.structureType === 1 || topicData?.type === 1) {
    // 单选题
    return topicData?.type === 1 && item.structureType === 1
      ? String.fromCharCode(65 + Number(item.answer))
      : topicData?.correct_answer
  } else if (item.structureType === 2) {
    // 多选题
    return item.answer?.length > 1
      ? (item.answer || []).map(cur => String.fromCharCode(65 + Number(cur)))
      : topicData.correct_answer
  } else if (item.structureType === 3) {
    // 判断题
    let { subject } = props.topicData
    let answer = item.answer[0]
    return answer === 1
      ? (subject === 3 && 'F') || '错误'
      : (subject === 3 && 'T') || '正确'
  } else {
    return item.answer
  }
}

watch(
  () => props.topicData,
  newValue => {
    questionData.value = setquestionData(newValue)
    topicParser.value = QuestionParser.parse(
      setquestionData(newValue),
      rbqOption.value
    )
  },
  {
    immediate: true
  }
)
</script>

<style lang="less" scoped>
.topic-cpn {
  min-height: 80px;
  min-width: 843px;
  background-color: #fff;

  :deep(.rbq-content) {
    table {
      text-align: center;
      border-collapse: collapse;
      word-break: break-word;
      word-wrap: break-word;
    }
  }

  :deep(.option-list-choice) {
    display: flex;
    flex-wrap: wrap;

    li {
      margin-right: 30px;
      display: flex;
    }
  }

  :deep(.link-container) {
    display: flex;
    gap: 100px;

    ul {
      height: inherit;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }

  .sub-question {
    display: flex;
  }
  :deep(.rbq-sub-question) {
    .rbq-content-wrapper {
      display: flex !important;
      gap: 2px;
    }
  }
  .sub-index {
    display: inline-block;
    line-height: 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #000;
    margin: 0 8px;
    font-size: 12px;
  }

  .more-box {
    border-top: 1px solid #448efb;
    padding: 20px;
    margin-top: 12px;

    .expand-analysis-item {
      display: flex;
      &:not(:last-child) {
        margin-bottom: 12px;
      }

      .expand-analysis-item-key {
        width: 100px;
        flex-shrink: 0;
        height: 27px;
        line-height: 27px;
        font-weight: 500;
      }

      .expand-analysis-item-content {
        .keypoint-tag {
          display: inline-flex;
          align-items: center;
          max-width: 100%;
          height: 27px;
          padding: 0 6px;
          border: 1px solid #ceddf2;
          border-radius: 3px;
          background-color: #ceddf2;
          color: #053071;
          font-size: 14px;
          line-height: 27px;
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
